<template>
    <mi-input v-model="value_c" clearable @click.stop="openDialog"></mi-input>

    <el-dialog v-model="showDialog" title="选择跳转链接">
        <el-container>
            <el-aside width="120px">
                <el-menu class="dir_menu"
                         @select="menuSelect"
                >
                    <el-menu-item index="page">
                        页面链接
                    </el-menu-item>
                    <el-menu-item index="goodsCate">
                        商品分类
                    </el-menu-item>
                    <el-menu-item index="goodsTag">
                        商品标签
                    </el-menu-item>
                    <el-menu-item index="goods">
                        商品
                    </el-menu-item>
                    <el-menu-item index="seckill">
                        秒杀
                    </el-menu-item>
                    <el-menu-item index="group">
                        拼团
                    </el-menu-item>
                    <el-menu-item index="follow">
                        接龙
                    </el-menu-item>
                    <el-menu-item index="articleCate">
                        资讯分类
                    </el-menu-item>
                    <el-menu-item index="article">
                        资讯
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                <el-space wrap v-if="menuSelected == 'page'">
                    <el-button v-for="(li,i) in list" :key="i"  @click="urlChange(li.url)">{{li.title}}</el-button>
                </el-space>

                <goods-cate-select
                    v-if="menuSelected=='goodsCate'"
                    v-model="selectVal.goodsCateId" @change="urlChange"/>

                <goods-tag-select v-if="menuSelected=='goodsTag'"
                              v-model="selectVal.goodsTagId" @change="urlChange"/>

                <goods-select v-if="menuSelected=='goods'"
                              v-model="selectVal.goodsId" @change="urlChange"/>

                <article-cate-select v-if="menuSelected=='articleCate'"
                              v-model="selectVal.articleCateId" @change="urlChange"/>

            </el-main>
        </el-container>

        <template #footer>
            <div class="d_flex flex_ai_c flex_jc_sb">
                <div></div>
                <el-space>
                    <el-button type="primary" @click="confirm">确认</el-button>
                </el-space>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts" name="UrlSelect">

import {computed, reactive, ref} from "vue";
import {simpleGet} from "@/utils/request";
import GoodsCateSelect from "@/views/store/components/GoodsCateSelect.vue";
import GoodsSelect from "@/views/store/components/GoodsSelect.vue";
import GoodsTagSelect from "@/views/store/components/GoodsTagSelect.vue";
import ArticleCateSelect from "@/views/site/components/ArticleCateSelect.vue";

const props = withDefaults(defineProps<{
    modelValue?: string,
}>(),{
    modelValue:''
})
const emits = defineEmits(['update:modelValue'])
const value_c = computed({
    get:() => {
        return props.modelValue
    },
    set:(val:string) => {
        emits("update:modelValue", val)
    }
})
const showDialog = ref<boolean>(false)
const menuSelected = ref<string>()
const list = ref<any[]>([])
const urlSelected = ref<string>()

const openDialog = () => {
    showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
}

const selectVal = reactive({
    goodsCateId:0,
    goodsId:0,
    goodsTagId:0,
    articleCateId:0,
})

const menuSelect = (type:string) => {
    menuSelected.value = type
    if (type == 'page'){
        simpleGet('/site.diyPage/getUrls').then((res) => {
            const {urls} = res

            list.value = urls

        })
    }
}
const urlChange = (val:any) => {
    let url = ''
    switch (menuSelected.value) {
        case 'page':
            url = val
            break;
        case 'goods':
            url = `/pages/goods/show?id=${val[0].id}`
            break;
        case 'goodsCate':
            url = `/pages/goods/list?cate_id=${val}`
            break;
        case 'goodsTag':
            url = `/pages/goods/list?tag_id=${val}`
            break;
        case 'articleCate':
            url = `/pages/article/list?cate_id=${val}`
            break;
    }
    urlSelected.value = url
}

const confirm = () => {
    value_c.value = urlSelected.value!
    closeDialog()
}

</script>

<style scoped>

</style>
